// css 初始化
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
li {
    list-style: none;
}
@font-face {
font-family: electronicFont;
src: url(../font/DS-DIGIT.TTF);
}
body {
    background: url(../images/bg.jpg) no-repeat top center;
    line-height: 1.15;
}
header {
    position: relative;
    height: 1.25rem;
    background: url(../images/head_bg.png) no-repeat top center;
    background-size: 100% 100%;
    h1 {
        font-size: .475rem;
        color: #fff;
        text-align: center;
        line-height: 1rem;
    }
    .showTime {
        position:absolute;
        top:0;
        right: .375rem;
        line-height: 0.9375rem;
        font-size: 0.25rem;
        color: rgba(255, 255, 255, 0.7);
    }
}
.mainbox {
    display: flex;
    min-width: 1024px;
    max-width: 1920px;
    margin: 0 auto;
    background-color: url(../images/);
    padding: 0.125rem 0.125rem 0;
    .column{
        flex: 3;
    }
    .column:nth-child(2) {
        flex: 5;
        margin: 0 0.125rem 0.1875rem;
        overflow: hidden;
    }
    .panel {
        position: relative;
        height: 5.9375rem;
        padding: 0 0.1875rem 0.5rem;
        border: 1px solid rgba(25, 186, 139, 0.17);
        margin-bottom: 0.1875rem;
        background: url(../images/line\(1\).png) rgba(255, 255, 255, 0.03);
        &::before {
            position: absolute;
            top: 0;
            left: 0;
            width: 10px;
            height: 10px;
            border-left: 2px solid #02a6b5;
            border-top: 2px solid #02a6b5;
            content: "";
        }
        &::after {
            position: absolute;
            top: 0;
            right: 0;
            width: 10px;
            height: 10px;
            border-right: 2px solid #02a6b5;
            border-top: 2px solid #02a6b5;
            content: "";
        }
        .panel-footer {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            &::before {
              position: absolute;
              left: 0;
              bottom: 0;
              width: 10px;
              height: 10px;
              border-left: 2px solid #02a6b5;
              border-bottom: 2px solid #02a6b5;
              content: "";
            }
            &::after {
              position: absolute;
              bottom: 0;
              right: 0;
              width: 10px;
              height: 10px;
              border-right: 2px solid #02a6b5;
              border-bottom: 2px solid #02a6b5;
              content: "";
            }
        }
        h2 {
            height: 0.6rem;
            color: #fff;
            line-height: 0.6rem;
            text-align: center;
            font-size: 0.25rem;
            font-weight: 400;
            a {
                color: #fff;
                // text-decoration: none;
                margin: 0,.125rem;
                font-size: .2rem;
                // background:#0A56A3;

                }
        }
        .chart {
            height: 5.125rem;
            .ul_list{
                overflow: hidden;
	            position: relative;
                .ul_listIn{
                    // -webkit-animation: 8s gundong linear infinite;
                    // animation: 8s gundong linear infinite;
                    position: relative;
                    display: block;
                }
                // @keyframes gundong {
                //     0% {
                //         -webkit-transform: translate3d(0, 0, 0);
                //         transform: translate3d(0, 0, 0);
                //     }
                //     100% {
                //         -webkit-transform: translate3d(0, -30vh, 0);
                //         transform: translate3d(0, -30vh, 0);
                //     }
                // }
            }
            ul {
                display:flex;
	            display: -webkit-flex;
	            width:100%;
                li {
                    width:20%;
	                text-align:center;
	                color:#fff;
	                font-size: .1875rem;
	                height: .375rem;
	                line-height: .375rem;
                    bottom: 50%
                }
                li:frist-child{
                    text-align:left;
                }
            }
            .ul_title { 
                background: linear-gradient(left, rgba(255,255,255,0.1), rgba(255,255,255,0.5), rgba(255,255,255,0.1));
                background: -ms-linear-gradient(left, rgba(255,255,255,0.1), rgba(255,255,255,0.5), rgba(255,255,255,0.1));
                background: -webkit-linear-gradient(left, rgba(255,255,255,0.1), rgba(255,255,255,0.5), rgba(255,255,255,0.1));
                background: -moz-linear-gradient(left, rgba(255,255,255,0.1), rgba(255,255,255,0.5), rgba(255,255,255,0.1));

            }
            .ul_con{
                border-bottom:0.008rem solid rgba(14,253,255,0.5);
            }



        }
        
    }
    .panel2 {
        position: relative;
        height: 2.625rem;
        padding: 0 0.1875rem 0.5rem;
        border: 1px solid rgba(25, 186, 139, 0.17);
        margin-bottom: 0.1875rem;
        background: url(../images/line\(1\).png) rgba(255, 255, 255, 0.03);
        &::before {
            position: absolute;
            top: 0;
            left: 0;
            width: 10px;
            height: 10px;
            border-left: 2px solid #02a6b5;
            border-top: 2px solid #02a6b5;
            content: "";
        }
        &::after {
            position: absolute;
            top: 0;
            right: 0;
            width: 10px;
            height: 10px;
            border-right: 2px solid #02a6b5;
            border-top: 2px solid #02a6b5;
            content: "";
        }
        .panel-footer {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            &::before {
              position: absolute;
              left: 0;
              bottom: 0;
              width: 10px;
              height: 10px;
              border-left: 2px solid #02a6b5;
              border-bottom: 2px solid #02a6b5;
              content: "";
            }
            &::after {
              position: absolute;
              bottom: 0;
              right: 0;
              width: 10px;
              height: 10px;
              border-right: 2px solid #02a6b5;
              border-bottom: 2px solid #02a6b5;
              content: "";
            }
        }
        h2 {
            height: 0.6rem;
            color: #fff;
            line-height: 0.6rem;
            text-align: center;
            font-size: 0.25rem;
            font-weight: 400;
            a {
                color: #fff;
                // text-decoration: none;
                margin: 0,.125rem;
                font-size: .2rem;
                // background:#0A56A3;

                }
        }
        .chart {
            height: 1.625rem;
            display: flex;
            .chartyibiao1 {
                flex:1 ;
            }
            .chartyibiao2 {
                flex:1 ;
            }
            .chartyibiao3 {
                flex:1 ;
            }
            .chartyibiao4 {
                flex:1 ;
            }
        }
        .bar_hd {
            ul{
                display: flex;
                li {
                    flex: 1;
                    height: .5rem;
                    line-height: .5rem;
                    font-size: .175rem;
                    color:#2ab8ff  ;
                    text-align: center;
                    padding-top: .0125rem;
                }
            }
        }

        
    }
    .panel3 {
        position: relative;
        height: 3.5rem;
        padding: 0 0.1875rem 0.5rem;
        border: 1px solid rgba(25, 186, 139, 0.17);
        margin-bottom: 0.1875rem;
        background: url(../images/line\(1\).png) rgba(255, 255, 255, 0.03);
        &::before {
            position: absolute;
            top: 0;
            left: 0;
            width: 10px;
            height: 10px;
            border-left: 2px solid #02a6b5;
            border-top: 2px solid #02a6b5;
            content: "";
        }
        &::after {
            position: absolute;
            top: 0;
            right: 0;
            width: 10px;
            height: 10px;
            border-right: 2px solid #02a6b5;
            border-top: 2px solid #02a6b5;
            content: "";
        }
        .panel-footer {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            &::before {
              position: absolute;
              left: 0;
              bottom: 0;
              width: 10px;
              height: 10px;
              border-left: 2px solid #02a6b5;
              border-bottom: 2px solid #02a6b5;
              content: "";
            }
            &::after {
              position: absolute;
              bottom: 0;
              right: 0;
              width: 10px;
              height: 10px;
              border-right: 2px solid #02a6b5;
              border-bottom: 2px solid #02a6b5;
              content: "";
            }
        }
        h2 {
            height: 0.6rem;
            color: #fff;
            line-height: 0.6rem;
            text-align: center;
            font-size: 0.25rem;
            font-weight: 400;
            a {
                color: #fff;
                // text-decoration: none;
                margin: 0,.125rem;
                font-size: .2rem;
                // background:#0A56A3;

                }
        }
        .chart {
            height: 410px;
            .sycm {
                ul {
                    margin-left:-.5rem;
                    margin-right:-.5rem;  
                    padding: .16rem 0;
                }
                li {
                    float: left; 
                    width: 33.33%; 
                    text-align: center; 
                    position: relative
                }
                li:before{
                    position:absolute; 
                    content: ""; 
                    height:30%; 
                    width: 1px; 
                    background: rgba(255,255,255,.1); 
                    right: 0; 
                    top: 15%;
                }
                li:last-child:before{
                    width: 0;
                }
                li h2{ 
                    font-size: .35rem; 
                    color: #2ab8ff;
                }
                li span{ 
                    font-size:.18rem; 
                    color: #fff; 
                    opacity: .5;
                }
            }
        }
        .clearfix:after, .clearfix:before {
            display: table;
	        content: " "
        }
        .clearfix:after {
	        clear: both
        }

        
    }
    .panel4 {
        position: relative;
        height: 5.625rem;
        padding: 0 0.1875rem 0.5rem;
        border: 1px solid rgba(25, 186, 139, 0.17);
        margin-bottom: 0.1875rem;
        background: url(../images/line\(1\).png) rgba(255, 255, 255, 0.03);
        &::before {
            position: absolute;
            top: 0;
            left: 0;
            width: 10px;
            height: 10px;
            border-left: 2px solid #02a6b5;
            border-top: 2px solid #02a6b5;
            content: "";
        }
        &::after {
            position: absolute;
            top: 0;
            right: 0;
            width: 10px;
            height: 10px;
            border-right: 2px solid #02a6b5;
            border-top: 2px solid #02a6b5;
            content: "";
        }
        .panel-footer {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            &::before {
              position: absolute;
              left: 0;
              bottom: 0;
              width: 10px;
              height: 10px;
              border-left: 2px solid #02a6b5;
              border-bottom: 2px solid #02a6b5;
              content: "";
            }
            &::after {
              position: absolute;
              bottom: 0;
              right: 0;
              width: 10px;
              height: 10px;
              border-right: 2px solid #02a6b5;
              border-bottom: 2px solid #02a6b5;
              content: "";
            }
        }
        h2 {
            height: 0.6rem;
            color: #fff;
            line-height: 0.6rem;
            text-align: center;
            font-size: 0.25rem;
            font-weight: 400;
            a {
                color: #fff;
                // text-decoration: none;
                margin: 0,.125rem;
                font-size: .2rem;
                // background:#0A56A3;

                }
        }
        .chart {
            height: 410px;
            overflow: hidden;
            .xcspwt-box{
                width: 100%;
                height:100%;
                // animation:animation-rotate 4s linear infinite;
                // @keyframes animation-rotate {
                //     0% {
                //         -webkit-transform: translate3d(0, 0, 0);
                //         transform: translate3d(0, 0, 0);
                //     }
                //     100% {
                //         -webkit-transform: translate3d(0, -30vh, 0);
                //         transform: translate3d(0, -30vh, 0);
                //     }
                // };
                li{
                    width: 100%;
                    height: .35rem;
                    line-height: .25rem;
                    color:#fff;
                    font-size: .2rem;
                    margin-top: .175rem;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    cursor:default;
                    span{
                        display: block;
                        float: left;
                    };
                    span:nth-of-type(1){
                        padding: 0 .0625rem;
                        line-height: .25rem;
                        text-align: center;
                        background: url("../images/bg1.png") no-repeat;
                        background-size: 100% 100%;
                    };
                    span:nth-of-type(2){
                        width: 5rem;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        padding: 0 5px;
                    
                    }
                }
            }
            // .xcspwt-box li{
            //     width: 100%;
            //     height: .25rem;
            //     line-height: .25rem;
            //     color:#fff;
            //     font-size: .15rem;
            //     margin-top: .175rem;
            //     overflow: hidden;
            //     text-overflow: ellipsis;
            //     white-space: nowrap;
            //     cursor:default;
            // }
            // .xcspwt-box li span{
            //     display: block;
            //     float: left;
            // }
            // .xcspwt-box li span:nth-of-type(1){
            //     padding: 0 .0625rem;
            //     line-height: .25rem;
            //     text-align: center;
            //     background: url("../images/bg1.png") no-repeat;
            //     background-size: 100% 100%;
            // }
            // .xcspwt-box li span:nth-of-type(2){
            //     width: 5rem;
            //     overflow: hidden;
            //     text-overflow: ellipsis;
            //     white-space: nowrap;
            //     padding: 0 5px;
            
            // }
        }

        
    }
}
.no {
    background-color:rgba(101, 132, 226, 0.1) ;
    padding: .1875rem;
    .no_hd {
        position: relative;
        background-color:rgba(101, 132, 226, 0.2) ;
        border: 1px solid rgba(25, 186, 139, 0.17);
        &::before {
            position: absolute;
            top: 0;
            left: 0;
            width: 20px;
            height: 10px;
            border-left: 2px solid #02a6b5;
            border-top: 2px solid #02a6b5;
            content: "";
        }
        &::after {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 20px;
            height: 10px;
            border-right: 2px solid #02a6b5;
            border-bottom: 2px solid #02a6b5;
            content: "";
        }
        ul {
            display: flex;
            li {
                position: relative;
                flex:1;
                height: .625rem;
                font-size: .5rem;
                color:#ffeb7b ;
                text-align: center;
                font-family: "electronicFont";
                &::after {
                    content: "";
                    position: absolute;
                    top: 25%;
                    right: 0;
                    height: 50%;
                    width: 1px;
                    background: rgba(255, 255, 255, 0.2);
                }
            }
        }
    }
    .no_bd {
        ul{
            display: flex;
            li {
                flex: 1;
                height: .5rem;
                line-height: .5rem;
                font-size: .225rem;
                color:rgba(255, 255, 255, 0.7)  ;
                text-align: center;
                padding-top: .0125rem;
            }
        }
    }
    .no_hd1 {
        position: relative;
        background-color:rgba(101, 132, 226, 0.2) ;
        border: 1px solid rgba(25, 186, 139, 0.17);
        &::before {
            position: absolute;
            top: 0;
            left: 0;
            width: 20px;
            height: 10px;
            border-left: 2px solid #02a6b5;
            border-top: 2px solid #02a6b5;
            content: "";
        }
        &::after {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 20px;
            height: 10px;
            border-right: 2px solid #02a6b5;
            border-bottom: 2px solid #02a6b5;
            content: "";
        }
        ul {
            display: flex;
            li {
                position: relative;
                flex:1;
                height: .625rem;
                font-size: .5rem;
                color:#fff ;
                text-align: center;
                font-family: "electronicFont";
                &::after {
                    content: "";
                    position: absolute;
                    top: 25%;
                    right: 0;
                    height: 50%;
                    width: 1px;
                    background: rgba(255, 255, 255, 0.2);
                }
            }
        }
    }
    .no_hd2 {
        position: relative;
        background-color:rgba(101, 132, 226, 0.2) ;
        border: 1px solid rgba(25, 186, 139, 0.17);
        &::before {
            position: absolute;
            top: 0;
            left: 0;
            width: 20px;
            height: 10px;
            border-left: 2px solid #02a6b5;
            border-top: 2px solid #02a6b5;
            content: "";
        }
        &::after {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 20px;
            height: 10px;
            border-right: 2px solid #02a6b5;
            border-bottom: 2px solid #02a6b5;
            content: "";
        }
        ul {
            display: flex;
            li {
                position: relative;
                flex:1;
                height: .625rem;
                font-size: .5rem;
                color:#78D5FA;
                text-align: center;
                font-family: "electronicFont";
                &::after {
                    content: "";
                    position: absolute;
                    top: 25%;
                    right: 0;
                    height: 50%;
                    width: 1px;
                    background: rgba(255, 255, 255, 0.2);
                }
            }
        }
    }
}
.map {
    position: relative;
    height: 10.125rem;
    .map1 {
        width: 6.475rem;
        height: 6.475rem;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: url(../images/map.png);
        background-size: 100% 100%;
        opacity: 0.3;
    }
    .map2 {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 8.0375rem;
        height: 8.0375rem;
        background: url(../images/lbx.png);
        animation: rotate1 15s linear infinite;
        opacity: 0.6;
        background-size: 100% 100%;
    }
    @keyframes rotate1 {
        form {
          transform: translate(-50%, -50%) rotate(0deg);
        }
        to {
          transform: translate(-50%, -50%) rotate(360deg);
        }
      }

    .map3 {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 7.075rem;
        height: 7.075rem;
        background: url(../images/jt.png);
        animation: rotate2 10s linear infinite;
        opacity: 0.6;
        background-size: 100% 100%;
    }
    .chart {
        position: absolute;
        top: 0;
        left: 0;
        // background-color: pink;
        width: 100%;
        height: 10.125rem;
      }
    @keyframes rotate2 {
        form {
          transform: translate(-50%, -50%) rotate(0deg);
        }
        to {
          transform: translate(-50%, -50%) rotate(-360deg);
        }
    }


}

// table{
//     table-layout: fixed;
//     word-break: break-all;
//      word-wrap: break-word; 

//     }

table {
    table-layout: fixed;
    word-break: break-all;
    word-wrap: break-word;
    padding: .125rem;
	width: "100%";
    height: "100%";
	border-collapse: collapse;
	overflow: hidden;
    margin-bottom: .125rem;
	box-shadow: 0 0 .25rem rgba(0,0,0,0.1);
}

th,
td {
	padding: .1625rem;
	background-color: rgba(255,255,255,0.2);
	color: #fff;
    width: 1.875rem;
    text-align: center;
}

th {
	text-align: center;
}

thead {
	th {
		background-color: #55608f;
	}
}

tbody {
	tr {
		&:hover {
			background-color: rgba(255,255,255,0.3);
		}
	};
	td {
		position: relative;
		&:hover {
			&:before {
				content: "";
				position: absolute;
				left: 0;
				right: 0;
				top: -9999px;
				bottom: -9999px;
				background-color: rgba(255,255,255,0.2);
				z-index: -1;
                text-align: center;
                height: .5rem;
                width: 1.25rem;
                font-size: .25rem;
			}
		}
	}
}
@media screen and (max-width: 1024px) {
    html {
      font-size: 42px !important;
    }
  }
@media screen and (min-width: 1920px) {
    html {
      font-size: 80px !important;
    }
}